<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 一、实例方法 二、静态方法
      // 一、实例方法
      // 1、catch：实例的方法，实例化对象的方法。
      // catch 是 onRejected 的一个别名
      //   let p1 = new Promise((resolve, reject) => {
      // setTimeout(() => {
      //   resolve(111);
      // reject("失败了");
      // }, 1000);
      //   });

      // 一般 then里就只写一个onResolved回调。onRejected回调不写；通过catch捕捉错误
      // catch 的返还值和 onRejected的返还值一样，catch是异步，也是微任务；
      //   console.log(111);
      //   setTimeout(() => {
      //     console.log(333);
      //   });

      //   let result = p1
      //     .then((res) => {
      //       // 调取resolve的时候执行
      //       console.log(res);
      //     })
      //     .catch((err) => {
      //       console.log(err);
      //     });
      //   console.log(222);
      //   console.log(result);

      // 为什么使用catch ？？
      // catch 会捕捉promise对象链式上的错误
      //   let p = new Promise((resolve, reject) => {
      //     // reject("错误了");
      //     resolve(111);
      //   });

      //   p.then(
      //     (res) => {
      //       console.log(res);
      //     },
      //     (err) => {
      //       console.log(err);
      //     }
      //   );

      //   p.then((res) => {
      //     console.log(res);
      //   }).catch((err) => {
      //     console.log(err);
      //   });

      //   链式调用promise对象;
      //   p.then((res) => {
      //     console.log(res);
      //     return new Promise((resolve, reject) => {
      //       resolve(222);
      //     });
      //   })
      //     .then((res) => {
      //       console.log(res);
      //       return new Promise((resolve, reject) => {
      //         // resolve(333);
      //         reject("错误了333");
      //       });
      //     })
      //     .then((res) => {
      //       console.log(333);
      //     })
      //     .catch((err) => {
      //       // 会捕捉promise对象链式上的错误
      //       console.log("最后的catch", err);
      //     });

      // 2.finally : promise执行完成之后调用；
      // 执行完成： 无论promise 执行成功了，还是执行失败了，只要promise执行完了就会调用finally
      // 应用场景：在项目中常遇到一些加载效果的功能，一般请求前页面显示加载效果，请求完成后取消页面加载效果，我一开始将标识放到then里面去处理，后面发现如果请求出错的情况下，页面一直加载没办法取消，后面将标识放到finally中去处理，从而解决了问题
      let p = new Promise((reslove, reject) => {
        setTimeout(() => {
          // reslove(111);
          reject("失败了");
        }, 1000);
      });

      p.then((res) => {
        console.log(res);
      })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          console.log("promise执行完毕了");
        });
    </script>
  </body>
</html>
